<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }"
                >首页</el-breadcrumb-item
            >
        </el-breadcrumb>
        <div class="content">
            <div
                v-if="show"
                id="echarts_bar"
                style="width: 500px; height: 500px"
            ></div>
            <div id="echarts_pie" style="width: 500px; height: 500px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {};
    },
    computed: {
        barData() {
            return {
                title: [
                    {
                        text: "统计",
                    },
                ],
                polar: {
                    radius: [30, "80%"],
                },
                angleAxis: {
                    max: 4,
                    startAngle: 75,
                },
                radiusAxis: {
                    type: "category",
                    data: ["管理员", "轮播图", "菜单", "会员", "套餐"],
                },
                tooltip: {},
                series: {
                    type: "bar",
                    data: [2, 3.6, 1.2, 2.4, 3.6, 1],
                    coordinateSystem: "polar",
                    label: {
                        show: true,
                        position: "middle",
                        formatter: "{b}: {c}",
                    },
                },
            };
        },
        pieData() {
            return {
                title: {
                    text: "Basic Graph",
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: "关系图",
                series: [
                    {
                        type: "graph",
                        layout: "none",
                        symbolSize: 50,
                        roam: true,
                        label: {
                            show: true,
                        },
                        edgeSymbol: ["circle", "arrow"],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20,
                        },
                        data: [
                            {
                                name: "菜谱",
                                x: 300,
                                y: 300,
                            },
                            {
                                name: "轮播图",
                                x: 800,
                                y: 300,
                            },
                            {
                                name: "管理员",
                                x: 550,
                                y: 100,
                            },
                            {
                                name: "会员",
                                x: 550,
                                y: 500,
                            },
                        ],
                        // links: [],
                        links: [
                            {
                                source: "菜谱",
                                target: "轮播图",
                                symbolSize: [5, 20],
                                label: {
                                    show: true,
                                },
                                lineStyle: {
                                    width: 5,
                                    curveness: 0.2,
                                },
                            },
                            {
                                source: "轮播图",
                                target: "菜谱",
                                label: {
                                    show: true,
                                },
                                lineStyle: {
                                    curveness: 0.2,
                                },
                            },
                            {
                                source: "菜谱",
                                target: "管理员",
                            },
                            {
                                source: "轮播图",
                                target: "管理员",
                            },
                            {
                                source: "轮播图",
                                target: "会员",
                            },
                            {
                                source: "菜谱",
                                target: "会员",
                            },
                        ],
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0,
                        },
                    },
                ],
            };
        },
    },
    methods: {},
    created() {},
    mounted() {
        const myBar = echarts.init(document.querySelector("#echarts_bar"));
        const myPie = echarts.init(document.querySelector("#echarts_pie"));
        myBar.setOption(this.barData);
        myPie.setOption(this.pieData);
    },
};
</script>

<style scoped>
.content {
    display: flex;
    justify-content: space-around;
}
</style>